<template>
	<md-field-group class="foget_view">
		<md-field
				v-model="mobile"
				icon="mobile"
				placeholder="请输入手机号"/>

		<md-field
				v-model="code"
				icon="lock"
				placeholder="请输入短信验证码"
		>
			<div slot="rightIcon" @click="getCode" class="getCode red">
				<countdown v-if="counting" :time="60000" @end="countdownend">
					<template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
				</countdown>
				<span v-else>获取验证码</span>
			</div>
		</md-field>

		<div class="foget_submit">
			<van-button size="large" type="danger" @click="submitCode">下一步</van-button>
		</div>
	</md-field-group>
</template>

<script>
	import field from '@/components/field/';
	import fieldGroup from '@/components/field-group/';

	export default {
		data() {
			return {
				counting: false,
				mobile: '',
				code: ''
			};
		},

		methods: {
			submitCode() {
				this.$router.push({name: 'forgetReset'});
			},
			getCode() {
				this.counting = true;
			},
			countdownend() {
				this.counting = false;
			}
		},

		components: {
			[field.name]: field,
			[fieldGroup.name]: fieldGroup
		}
	};
</script>

<style lang="scss" scoped>
	@import '../../../assets/scss/mixin';

	div.foget_view {
		background-color: #fff;
		padding-top: 30px;
	}

	div.foget_submit {
		padding-top: 30px;
		padding-bottom: 20px;
	}

	.getCode {
		@include one-border(left);
		text-align: center;
	}

	.time_down {
		color: $red;
	}
</style>
